<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tpshop-商品细节</title>
    <link rel="stylesheet" href="./css/xiangqing.css">
    <link rel="stylesheet" href="./font/iconfont.css">
</head>

<body>
	<!-- 页面头部 -->
	<div class="index-top">
	</div>
	
	
	
    <div class="big">
        <div class="leftimg">
            <div class="box">
                <div class="mbox">
                    <img src="" alt="">
                    <span></span>
                    <em></em>
                </div>
                <div class="list">
                    <ul>
                    </ul>
                </div>
            </div>

            <div class="lbox" style="width:472px;height:472px;">
                <img src="" alt="">
            </div>
            <div class="sc">
                <span>收藏商品（0）</span>
                <i>举报</i>
            </div>
        </div>
        <div class="right ">
            <h2 class="title-text"></h2>
            <div class="presale">
                <div class="pre1">
                    <ul class="price1">
                        <li class="shopprice">
                            <i>商城价:</i>
                            <em>&yen;</em>
                            <span></span>
                        </li>
                    </ul>
                    <div class="price2">
                        <i>市场价:</i>
                        <del class="marketprice">
                            <em>&yen;</em>
                            <span></span>
                        </del>
                        <strong>
                            <h6>手机购买更便宜 </h6> <img src="./imgs/erwm.png" alt="">
                        </strong>
                    </div>
                </div>

                <div class="price3">
                    <div class="allcom1">
                        <p>累计评价</p>
                        <span>0</span>
                    </div>
                    <em></em>
                    <div class="allcom2">
                        <p>累计销量</p>
                        <span>0</span>
                    </div>
                </div>
            </div>
            <div class="sendone commen1">
                <span class="commen2">配送：</span>
                <div class="delivery">
                    <div>北京市</div>
                    <b></b>
                </div>
            </div>
            <div class="service commen1">
                <span class="commen2">服务：</span>
                <i>由 <a href="#">商城6666</a>发货并提供售后服务</i>
            </div>
            <div class="brand commen1">
                <span class="commen2">品牌：</span>
                <i class="lawir"></i>
            </div>
            <div class="send commen1">
                <span class="commen2 shuliang">数量：</span>
                <div class="number"></div>
                <em>库存：100</em>
            </div>
            <div class="but">
                <a href="#" class="buy">立即购买</a>
                <a href="#" class="gwc"> 加入购物车</a>
            </div>

        </div>
        <div class="column">
            <div class="lanmei">
                <img src="./imgs/lanmei.jpg" alt="">
                <br><a href="#">商城666</a>
            </div>
            <div class="allscore">
                <span>店铺总分:</span>
                <a href="#"><em></em><i>0.00</i></a><b>分</b>
            </div>
            <div class="score">
                <span>评分明细</span>
                <span>与行业相比</span>
            </div>
            <div class="goods">
                <strong>商品&nbsp;0.00</strong>
                <u>100%</u>
            </div>
            <div class="svs">
                <strong>服务&nbsp;0.00</strong>
                <u>100%</u>
            </div>
            <div class="prescription">
                <strong>时效&nbsp;0.00</strong>
                <u>100%</u>
            </div>
            <div class="company">
                <span>公司：</span>
            </div>
            <div class="location">
                <span>所在地：</span>
                <i>广东省</i>
                <i>深圳市</i>
            </div>
            <div class="onlineSer">
                <span>在线客服</span>
            </div>
            <div class="shop">
                <a href="#">进店逛逛</a>
                <a href="#">关注店铺</a>
            </div>

        </div>
    </div>
    <div class="big1">
        <div class="listleft">
            <div class="search">
                <h2>商品搜索</h2>
                <div class="content">
                    <span>关键字</span>
                    <input type="text" class="keyword"><br>
                    <span>价&nbsp;&nbsp;&nbsp;格</span>
                    <input type="text" value="&yen;" class="pri1"> - <input type="text" value="&yen;" class="pri2"><br>
                    <span class="a1"></span>
                    <input type="search" class="btn" value="搜索">
                </div>

            </div>
            <div class="classify">
                <h2>商品搜索</h2>
            </div>
            <div class="brand1">
                <h2>品牌推荐</h2>
                <ul>
                    <li><a href="#">LRUD</a></li>
                    <li><a href="#">华为</a></li>
                    <li><a href="#">olrain欧芮儿</a></li>
                    <li><a href="#">海信</a></li>
                    <li><a href="#">美宝莲</a></li>
                </ul>
            </div>
            <div class="hotsearch">
                <h2>热搜推荐</h2>
                <ul>
                    <li><a href="#">手机</a></li>
                    <li><a href="#">华为</a></li>
                    <li><a href="#">衣服</a></li>
                    
                </ul>
            </div>
            <div class="looked">
                <h2>看了又看</h2>
                <div class="look1">
                    <ul>
                        <li>
                            <a href="#"><img src="./imgs/clothes.png" alt=""></a>
                            <p class="title"><a href="#">MO&Co.2017夏季新品深V领荷叶边衣摆抽绳碎花...</a></p>
                            <p class="money">
                                <span class="m1">&yen;</span>
                                <span class="m2">199.00</span>
                            </p>
                        </li>
                    </ul>
                </div>
                <div class="look1">
                    <ul>
                        <li>
                            <a href="#"><img src="./imgs/clothes1.png" alt=""></a>
                            <p class="title"><a href="#">
                                哥弟女装2018春季新款中长裙吊带V领衣裙、</a></p>
                            <p class="money">
                                <span class="m1">&yen;</span>
                                <span class="m2">500.00</span>
                            </p>
                        </li>
                    </ul>
                </div>
                <div class="look1">
                    <ul>
                        <li>
                            <a href="#"><img src="./imgs/clothes.png" alt=""></a>
                            <p class="title"><a href="#">MO&Co.2017夏季新品深V领荷叶边衣摆抽绳碎花...</a></p>
                            <p class="money">
                                <span class="m1">&yen;</span>
                                <span class="m2">199.00</span>
                            </p>
                        </li>
                    </ul>
                </div>
                <div class="look1">
                    <ul>
                        <li>
                            <a href="#"><img src="./imgs/clothes1.png" alt=""></a>
                            <p class="title"><a href="#">
                                哥弟女装2018春季新款中长裙吊带V领衣裙、</a></p>
                            <p class="money">
                                <span class="m1">&yen;</span>
                                <span class="m2">500.00</span>
                            </p>
                        </li>
                    </ul>
                </div>
                <div class="look1">
                    <ul>
                        <li>
                            <a href="#"><img src="./imgs/clothes.png" alt=""></a>
                            <p class="title"><a href="#">MO&Co.2017夏季新品深V领荷叶边衣摆抽绳碎花...</a></p>
                            <p class="money">
                                <span class="m1">&yen;</span>
                                <span class="m2">199.00</span>
                            </p>
                        </li>
                    </ul>
                </div>
                <div class="look1">
                    <ul>
                        <li>
                            <a href="#"><img src="./imgs/clothes1.png" alt=""></a>
                            <p class="title"><a href="#">
                                哥弟女装2018春季新款中长裙吊带V领衣裙、</a></p>
                            <p class="money">
                                <span class="m1">&yen;</span>
                                <span class="m2">500.00</span>
                            </p>
                        </li>
                    </ul>
                </div>
                <div class="look1">
                    <ul>
                        <li>
                            <a href="#"><img src="./imgs/clothes.png" alt=""></a>
                            <p class="title"><a href="#">MO&Co.2017夏季新品深V领荷叶边衣摆抽绳碎花...</a></p>
                            <p class="money">
                                <span class="m1">&yen;</span>
                                <span class="m2">199.00</span>
                            </p>
                        </li>
                    </ul>
                </div>
                <div class="look1">
                    <ul>
                        <li>
                            <a href="#"><img src="./imgs/clothes1.png" alt=""></a>
                            <p class="title"><a href="#">
                                哥弟女装2018春季新款中长裙吊带V领衣裙、</a></p>
                            <p class="money">
                                <span class="m1">&yen;</span>
                                <span class="m2">500.00</span>
                            </p>
                        </li>
                    </ul>
                </div>
                <div class="look1">
                    <ul>
                        <li>
                            <a href="#"><img src="./imgs/clothes.png" alt=""></a>
                            <p class="title"><a href="#">MO&Co.2017夏季新品深V领荷叶边衣摆抽绳碎花...</a></p>
                            <p class="money">
                                <span class="m1">&yen;</span>
                                <span class="m2">199.00</span>
                            </p>
                        </li>
                    </ul>
                </div>
                <div class="look1">
                    <ul>
                        <li>
                            <a href="#"><img src="./imgs/clothes1.png" alt=""></a>
                            <p class="title"><a href="#">
                                哥弟女装2018春季新款中长裙吊带V领衣裙、</a></p>
                            <p class="money">
                                <span class="m1">&yen;</span>
                                <span class="m2">500.00</span>
                            </p>
                        </li>
                    </ul>
                </div>
                <div class="look1">
                    <ul>
                        <li>
                            <a href="#"><img src="./imgs/clothes.png" alt=""></a>
                            <p class="title"><a href="#">MO&Co.2017夏季新品深V领荷叶边衣摆抽绳碎花...</a></p>
                            <p class="money">
                                <span class="m1">&yen;</span>
                                <span class="m2">199.00</span>
                            </p>
                        </li>
                    </ul>
                </div>
                <div class="look1">
                    <ul>
                        <li>
                            <a href="#"><img src="./imgs/clothes1.png" alt=""></a>
                            <p class="title"><a href="#">
                                哥弟女装2018春季新款中长裙吊带V领衣裙、</a></p>
                            <p class="money">
                                <span class="m1">&yen;</span>
                                <span class="m2">500.00</span>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="listright">
            <ul class="tabname">
                <li>商品介绍</li>
                <li>规格及包装</li>
                <li>评价（0）</li>
                <li>售后服务</li>
            </ul>
            <div class="cont">
                <div class="item">
                    <div class="i1">
                        <div class="item1">
                        <p class="goodsname"></p>
                    <ul class="a1">
                        <li>品牌：</li>
                        <li>货号：TP0000252</li>
                    </ul>
                    </div>
                    <div class="pic1 detail-img-b">
                        <ul></ul>
                    </div>
                    </div>
                </div>
                <div class="item">
                    <div class="i1">
                        <p class="item2">属性</p>
                    </div>
                </div>
                <div class="item">
                    <div class="i1">
                             <h2>商品评价</h2>
                            <div class="item3">
                                <ul class="evaluate">
                                    <li class="precent"><span>100%</span></li>
                                    <li>
                                            <div class="good">
                                                <span class="abc">好评</span>
                                                <i class="abc1">(100%)</i>
                                                <em class="abc2"></em>
                                            </div>
                                            <div class="mid">
                                                <span class="abc">中评</span>
                                                <i class="abc1">(0%)</i>
                                                <em class="abc3"> </em>
                                            </div>
                                            <div class="bad">
                                                <span class="abc">好评</span>
                                                <i class="abc1">(0%)</i>
                                                <em class="abc3"></em>
                                            </div>
                                        </li>
                                    <li><p class="p1">推荐点</p></li> 
                                    <li><p class="p2">你可以对已购的商品进行评价</p><a href="#">发表评论</a></li>
                                </ul>
                                <ul class="alleva">
                                    <li><a href="">全部评论(0)</a></li>
                                    <li><a href="">好评（0）</a></li>
                                    <li><a href="">中评（0）</a></li>
                                    <li><a href="">差评（0）</a></li>
                                    <li><a href="">晒单（0）</a></li>
                                </ul>
                            </div>

                    </div>
                </div>
                <div class="item">
                    <div class="i1">
                        <div class="item4 ">
                      <h2>售后服务</h2>
                    <div class="after-sale item3">
                        <ul>
                            <li class="iconfont icon-twitter"></li>
                            <li class="saler">
                                <span>卖家服务</span>
                                <p>全国联保一年</p>
                            </li>
                        </ul>
                        <ul>
                            <li class="iconfont icon-twitter"></li>
                            <li class="saler">
                                <span>商城承诺</span>
                                <p>商城平台卖家销售并发货的商品，由平台卖家提供发票和相应的售后服务。请您放心购买！ 注：因厂家会在没有任何提前通知的情况下更改产品包装、产地或者一些附件，本司不能确保客户收到的货物与商城图片、产地、附件说明完全一致。 只能确保为原厂正货！并且保证与当时市场上同样主流新品一致。若本商城没有及时更新，请大家谅解！</p>
                            </li>
                        </ul>
                        <ul>
                            <li class="iconfont icon-twitter"></li>
                            <li class="saler">
                                <span>正品行货</span>
                                <p>商城向您保证所售商品均为正品行货，商城自营商品开具机打发票或电子发票。</p>
                            </li>
                        </ul>
                        <ul>
                            <li class="iconfont icon-twitter"></li>
                            <li class="saler">
                                <span>全国联保</span>
                                <p>凭质保证书及商城发票，可享受全国联保服务（奢侈品、钟表除外；奢侈品、钟表由联系保修，享受法定三包售后服务），与您亲临商场选购的商品享 受相同的质量保证。商城还为您提供具有竞争力的商品价格和运费政策，请您放心购买</p>
                            </li>
                        </ul>
                        <ul>
                            <li class="iconfont icon-twitter"></li>
                            <li class="saler">
                                <span>退货无忧</span>
                                <p>客户购买商城自营商品7日内（含7日，自客户收到商品之日起计算），在保证商品完好的前提下，可无理由退货。（部分商品除外，详情请见各商品细则）</p>
                            </li>
                        </ul>
                    </div>
                    <h2>退款说明</h2>
                    <ul class="refund">
                        <li>1.若您购买的家电商品已经拆封过，需要退换货，需请联系原厂开具鉴定检测单</li>
                        <li>2.签收商品隔日起七日内提交退货申请，2-3天快递员与您联系安排取回商品</li>
                        <li>3.商品退回检验，且必须附上检测单</li>
                        <li>4.通过线上支付的订单办理退货，商品退回检验无误后，商城将提交退款申请, 实际款项会依照各银行作业时间返还至您原支付方式 若您采用货到付款，请于 办理退货时提供退款账户，亦于商品退回检验无误后，将退款汇至您的银行账户中</li>
                        <li>5.若退回商品有缺件、影响二次销售状况时，退款作业将暂时停止，飞牛网会依商品状况报价，后由客服人员与您联系说明并于订单内扣除费用后退回剩余款项， 或您可以取消退货申请；若符合退货条件者将于商品取回后约1-2个工作日内完成退款</li>
                        
                    </ul>
                  </div>
                    </div>
                  <div class="i1 i2">
                      <div class="label">
                          <a href="#">全部咨询</a>
                          <a href="#">商品咨询</a>
                          <a href="#">支付</a>
                          <a href="#">配送</a>
                          <a href="#">售后</a>
                      </div>
                      <div class="tips">
                          <p><i>温馨提示：</i>因产线可能更改商品包装、产地、附配件等未及时通知，且每位咨询者购买、提问时间等不同。为此，客服给到的回复仅对提问者3天内有效，其他网友仅供参考！给您带来的不便还请谅解，谢谢</p>
                          
                      </div>
                       <p class="tip2">共<span>0</span>条</p>
                       <h3>发表咨询</h3>
                       <div class="public-cont">
                           <p class="check-consult-type">
                               <i>商品咨询:</i>
                               <span>
                                   <input type="radio" name="consult-type" value="1">商品咨询
                               </span>
                               <span>
                                   <input type="radio" name="consult-type" value="2">支付
                               </span>
                               <span>
                                   <input type="radio" name="consult-type" value="3">配送
                               </span>
                               <span>
                                   <input type="radio" name="consult-type" value="4">售后
                               </span>
                           </p>
                           <div class="nickname">
                               <span>昵称:</span>
                               <input type="text" placeholder="请输入昵称" name="username">
                           </div>
                           <textarea class="public-des" placeholder="请在这里输入你要描述的信息" name="content" ></textarea>
                           <p class="v-code">
                               验证码：<input type="text" class="verify-code">
                           </p>
                           <input type="submit" class="public-btn" value="提交">
                       </div>
                  </div>
                </div>
            </div>
        </div>
    </div>



    <!-- 页面底部 -->
   	<div class="index-bottom"></div>

</body>
<script src="./libs/jquery.js"></script>
<script src="./js/number.js"></script>
<script>

		$(".index-top").load("./public-page/head.html");
		$(".index-bottom").load("./public-page/bottom.html");


    //数字框
    new InputNumber({
        min:1,
        max:999,
        step:1,
        value:1,
        cont:document.querySelector(".number")
    })


    const id=location.search.split("?")[1];
	console.log(id)
//    console.log("location.search",location.search)
//    console.log(id)
   $.ajax({
       url:"http://localhost:3000/api",
       data:{
           type:"getGoods"
       },
       success:res=>{
		   // console.log(123)
            res = JSON.parse(res).data
            console.log("res",res);
            let i = 0;
            const flag = res.some((val,idx)=>{
                i = idx;
				
                return val.proId === id
            })
			console.log(i)
			console.log(flag)
			console.log(res[i])
           if(flag){
            render(res[i]);
            new Magnifier(res[i]);
            
           }
       }
   })

   function render(data){
       console.log(data);
       $(".mbox").children("img").attr("src",data.img)
       //图片列表
       let str="";
       data.imgs.forEach(val=>{
           str+=`<li><img src="${val}" style="width: 60px;height: 60px;"></li>`
       })
       $(".list").children("ul").html(str);
       //默认大图
       $(".lbox").children("img").attr("src",data.img);
       //商品名称
       $(".title-text").html(data.proName);
       $(".goodsname").html(data.proName);
       //商品介绍图
       let str1="";
       data.introduce.forEach(val=>{
           str1+=`<li><img src="${val}"></li>`
       })
       $(".detail-img-b").children("ul").html(str1);
       //现价
       $(".shopprice").children("span").html((data.price*data.discount/10).toFixed(2));
       //原价
       $(".marketprice").children("span").html(data.price.toFixed(2));
       //品牌
       $(".lawir").html(data.brand);
   }
    
    // 放大镜
    class Magnifier {
        constructor(data) {
            this.data = data;
            this.mbox = this.getEle('.mbox');
            this.mimg = this.mbox.children[0];
            this.mspan = this.mbox.children[1];
            this.lbox = this.getEle(".lbox");
            this.limg = this.lbox.children[0];
            this.list=this.getEle(".list ul");
            this.list_img=this.list.querySelectorAll("li img")
           
            this.index = 0;
            
            this.addEvent();
        }
        getEle(tag, single = true) {
            if (single) {
                return document.querySelector(tag);
            } else {
                return document.querySelectorAll(tag);
            }
        }
        addEvent () {
            const that = this;

            this.mbox.onmouseenter = function () {
                that.show();
            }
    
            this.mbox.onmousemove = function (eve) {
                const e = eve || window.event;
                that.move(e);
            }
    
            this.mbox.onmouseleave = function () {
                that.hide();
            }
            for(let i=0;i<this.list_img.length;i++){
                this.list_img[i].onclick = () => {
                    // console.log(123)
                    this.limg.src = this.list_img[i].src;
                    this.mimg.src = this.list_img[i].src;
                }
            }
            
        }
       
        show() {
            this.mspan.style.display = "block";
            this.lbox.style.display = "block";
            
            this.mspan.style.width = (this.lbox.offsetWidth / this.limg.offsetWidth) * this.mbox.offsetWidth + "px";
            this.mspan.style.height = (this.lbox.offsetHeight / this.limg.offsetHeight) * this.mbox.offsetHeight + "px";
        }
    
        hide() {
            this.mspan.style.display = "none";
            this.lbox.style.display = "none";
        }
    
        move(e) {
            let l = e.offsetX - this.mspan.offsetWidth/2;
            let t = e.offsetY - this.mspan.offsetHeight/2;
            if(l < 0) l=0;
            if(t < 0) t=0;
            if(l > this.mbox.offsetWidth - this.mspan.offsetWidth){
                l = this.mbox.offsetWidth - this.mspan.offsetWidth
            }
            if(t > this.mbox.offsetHeight - this.mspan.offsetHeight){
                t = this.mbox.offsetHeight - this.mspan.offsetHeight
            }
            this.mspan.style.left = l + "px";
            this.mspan.style.top = t + "px";
            const x = l / (this.mbox.offsetWidth - this.mspan.offsetWidth);
            const y = t / (this.mbox.offsetHeight - this.mspan.offsetHeight);
            this.limg.style.left = -x * (this.limg.offsetWidth - this.lbox.offsetWidth) + "px"
            this.limg.style.top = -y * (this.limg.offsetHeight - this.lbox.offsetHeight) + "px"
        }
    }

    
    // 选项卡切换
    function Tab(){
        this.li=document.querySelectorAll(".listright li");
        this.item=document.querySelectorAll(".listright .item");
        this.index=0;
        this.addEvent();
        this.setIndex();
        this.setActive();
    }
    Tab.prototype.setActive=function(){
        this.li[this.index].className="active";
        this.item[this.index].style.display="block";
    }
    Tab.prototype.setIndex=function(){
        for(let i=0;i<this.li.length;i++){
            this.li[i].xuhao=i;
        }
    }
    Tab.prototype.addEvent=function(){
        const that=this;
        for(let i=0;i<this.li.length;i++){
            this.li[i].onclick=function(){
                // console.log(this.xuhao);
                that.hide();
                that.show(this);
                that.index=this.xuhao;
            }
        }
    }
    Tab.prototype.hide=function(){
        this.li[this.index].className="";
        this.item[this.index].style.display="none";
    }
    Tab.prototype.show=function(now){
        now.className="active";
        this.item[now.xuhao].style.display="block";
    }
    new Tab();
</script>

</html>